/*
* @Date: 2019-08-22 09:13:08
* @Last Modified time: 2019-08-22 09:13:08
* @Content:快速定位包括里程定位和车站定位
*/
<template>
  <div class="quickLocation">
    <div class="quickLocationHeader">
      <el-col :span="12">
        <div class="grid-content">
          <a
            class="quickLocationTab kfb-icon-jiaoyiguanli"
            v-bind:class="{quickLocationTabActivate:tabSelect==1}"
            @click="tabSelect=1"
          >里程查询</a>
          <!-- <el-button type="text">里程查询</el-button> -->
        </div>
      </el-col>
      <div :span="12">
        <div class="grid-content">
          <a
            class="quickLocationTab kfb-icon-tianjia"
            v-bind:class="{quickLocationTabActivate:tabSelect==2}"
            @click="tabSelect=2"
          >车站定位</a>
        </div>
      </div>
    </div>
    <!--<el-divider></el-divider>-->
    <div class="quickLocationContent">
      <div class="mileageLocation" v-show="tabSelect==1">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="线路:">
            <el-select v-model="form.lineName" placeholder="请选择线路" size="mini">
              <el-option label="京哈线上" value="京哈线上"></el-option>
              <el-option label="京哈线下" value="京哈线下"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="里程:">
            <el-col class="line" :span="2">K</el-col>
            <el-col :span="8">
              <el-input v-model="form.milKilo"></el-input>
            </el-col>
            <el-col class="line" :span="1">+</el-col>
            <el-col :span="9">
              <el-input v-model="form.milMeter"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div style="margin-left:65px;">
          <el-col :span="12">
            <el-button @click="milLocation">定位</el-button>
          </el-col>
          <el-col :span="12">
            <el-button @click="clearMilLocation">清除</el-button>
          </el-col>
        </div>
      </div>
      <div class="stationLocation" v-show="tabSelect==2">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="线路:">
            <el-select v-model="form.lineName" placeholder="请选择线路">
              <el-option label="京哈线上" value="京哈线上"></el-option>
              <el-option label="京哈线下" value="京哈线下"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车站:">
            <el-select v-model="form.station" placeholder="请选择线路">
              <el-option label="哈尔滨站" value="jhx"></el-option>
              <el-option label="哈尔滨西站" value="lbx"></el-option>
              <el-option label="王岗站" value="lbx"></el-option>
              <el-option label="双城站" value="lbx"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div style="margin-left:65px;">
          <el-col :span="12">
            <el-button @click="stationLocation">定位</el-button>
          </el-col>
          <el-col :span="12">
            <el-button>清除</el-button>
          </el-col>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: "first",
        tabSelect: 1,
        form: {
          name: "",

          lineName: "",
          station: "",
          milKilo: "",
          milMeter: "",
          milMarker: undefined,

          date1: "",
          date2: "",
          delivery: false,
          type: [],
          resource: "",
          desc: ""
        }
      };
    },
    methods: {
      handleClick(tab, event) {
      },

      //里程定位
      milLocation() {
        let mil =
          parseFloat(this.form.milKilo) * 1000 + parseFloat(this.form.milMeter);
        this.seachRoutePointByMil(this.form.lineName, "JHXRoute", mil);
      },

      //清除定位
      clearMilLocation($event) {
        this.remvoeMilMarker();
      },

      //车站定位
      stationLocation() {
        this.remvoeMilMarker();
      },

      //通过坐标查里程
      searchRouteByPoint(routeName, pointGeometryData) {
        let p1 = new Promise((resolve, reject) => {
          let param = new SuperMap.QueryBySQLParameters({
            queryParams: {
              name: "JHXRoute@JHRoute",
              attributeFilter: "1=1"
            }
          });

          let queryService = new mapboxgl.supermap.QueryService(
            "http://218.10.70.76:8091/iserver/services/map-JHRoute/rest/maps/JHXRoute"
          ).queryBySQL(param, serviceResult => {
            let recordsets =
              serviceResult &&
              serviceResult.result &&
              serviceResult.result.recordsets;
            let features = recordsets && recordsets[0] && recordsets[0].features;

            if (features) {
              let routePoint = features.features[0].geometry;
              resolve(routePoint);
            } else {
              reject("路由查询师表");
            }
          });
        });

        p1.then(routePoint => {
          let lineGeometryData = {
            type: "Feature",
            geometry: {
              type: "LineString",
              coordinates: routePoint.coordinates[0]
            }
          };

          // console.log(features.features[0].geometry.coordinates);

          let routeCalculateMeasureService = new mapboxgl.supermap.SpatialAnalystService(
            "http://218.10.70.76:8091/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst"
          );
          let routeCalculateMeasureParameters = new SuperMap.RouteCalculateMeasureParameters(
            {
              sourceRoute: lineGeometryData, //必选,路由类型
              point: pointGeometryData, //必选
              tolerance: 0.0001,
              isIgnoreGap: false
            }
          );

          routeCalculateMeasureService.routeCalculateMeasure(
            routeCalculateMeasureParameters,
            routeCaculateServiceResult => {
              console.log(routeCaculateServiceResult);
              // console.log("xxxxx");
            }
          );
        }).catch(err => {
          console.log(err);
        });
      },

      //通过里程选点
      seachRoutePointByMil(routeID, routeName, Mil) {
        let p1 = new Promise((resolve, reject) => {
          let param = new SuperMap.QueryBySQLParameters({
            queryParams: {
              name: "JHXRoute@JHRoute",
              attributeFilter: "RouteID = '" + routeID + "'"
            }
          });

          let queryService = new mapboxgl.supermap.QueryService(
            "http://218.10.70.76:8091/iserver/services/map-JHRoute/rest/maps/JHXRoute"
          ).queryBySQL(param, serviceResult => {
            let recordsets =
              serviceResult &&
              serviceResult.result &&
              serviceResult.result.recordsets;
            let features = recordsets && recordsets[0] && recordsets[0].features;

            if (features) {
              let routePoint = features.features[0].geometry;
              resolve(routePoint);
            } else {
              reject("路由查询失败！");
            }
          });
        });

        p1.then(routePoint => {
          let lineGeometryData = {
            type: "Feature",
            geometry: {
              type: "LineString",
              coordinates: routePoint.coordinates[0]
            }
          };

          // console.log(features.features[0].geometry.coordinates);

          let routeCalculateMeasureService = new mapboxgl.supermap.SpatialAnalystService(
            "http://218.10.70.76:8091/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst"
          );
          let routeLocatorParameters_point = new SuperMap.RouteLocatorParameters({
            sourceRoute: lineGeometryData, //必选,路由类型
            type: "POINT",
            measure: Mil,
            offset: 0,
            isIgnoreGap: true
          });

          routeCalculateMeasureService.routeLocate(
            routeLocatorParameters_point,
            routeLocateServiceResult => {
              console.log(routeLocateServiceResult);
              let lng =
                routeLocateServiceResult.result.resultGeometry.geometry
                  .coordinates[0];
              let lat =
                routeLocateServiceResult.result.resultGeometry.geometry
                  .coordinates[1];

              console.log(lng);
              console.log(lat);

              console.log(this.$store.state.eswyzt.map);

              this.createMilMarker2Map(lng, lat);
            }
          );
        }).catch(err => {
          console.log(err);
        });
      },

      //通过坐标查询里程
      createMilMarker2Map(lng, lat) {
        if (this.milMarker) {
          this.milMarker.remove();
          this.milMarker = undefined;
        }
        let milMarkerDiv = document.createElement("div");
        milMarkerDiv.className = "marker";
        milMarkerDiv.style.backgroundImage =
          "url(./static/img/milSearch/location.png)";
        milMarkerDiv.style.width = 25 + "px";
        milMarkerDiv.style.height = 37 + "px";

        this.milMarker = new mapboxgl.Marker(milMarkerDiv, {
          offset: [0, -8]
        })
          .setLngLat([lng, lat])
          .addTo(this.$store.state.eswyzt.map);

        this.$store.state.eswyzt.map.flyTo({center: [lng, lat], zoom: 16});
      },

      //删除定位marker
      remvoeMilMarker() {
        if (this.milMarker) {
          this.milMarker.remove();
          this.milMarker = undefined;
        }
      }
    }
  };
</script>

<style>
  .quickLocation {
    position: relative;
    height: 100%;
    z-index: 999;
    margin-top: -12px;
    color: #fff;
    font-size: 0.8em;
  }

  .quickLocation .quickLocationTab {
    line-height: 30px;
  }

  .quickLocation .quickLocationTabActivate {
    color: #398f86FF;
  }

  .quickLocation .el-input__inner {
    border-radius: 0em;
    background-color: #00000000;
    border: 1px solid #fff;
    height: 30px;
    color: #fff;
  }


  .quickLocation .el-select-dropdown__item.hover {
    background-color: #fff0;
  }

  .quickLocation .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background-color: #0003;
  }

  .quickLocation .grid-content {
    border-radius: 0px;
    min-height: 36px;
    text-align: center;
  }

  .quickLocation .el-form-item {
    margin-bottom: 5px;
  }

  .quickLocation .el-button + .el-button {
    margin-left: 100px;
  }

  .quickLocation .el-button {
    padding: 5px 20px;
    border-radius: 0px;
    background-color: #fff0;
    color: #fff;
    margin-bottom: 1em;
  }

  .quickLocation .el-form-item__label {
    color: #fff;
  }



</style>


